<script lang="ts" setup>
import { zeroFilling } from "../tools";

const week: Array<string> = ["日", "一", "二", "三", "四", "五", "六"];
let date = $ref(new Date());

let year = $ref(date.getFullYear());
let month = $ref(zeroFilling(date.getMonth() + 1));
let day = $ref(zeroFilling(date.getDate()));
let hour = $ref(zeroFilling(date.getHours()));
let minute = $ref(zeroFilling(date.getMinutes()));
let second = $ref(zeroFilling(date.getSeconds()));

let weekday = $ref(week[date.getDay()]);

setInterval((): void => {
  date = new Date();

  year = date.getFullYear();
  month = zeroFilling(date.getMonth() + 1);
  day = zeroFilling(date.getDate());
  hour = zeroFilling(date.getHours());
  minute = zeroFilling(date.getMinutes());
  second = zeroFilling(date.getSeconds());

  weekday = week[date.getDay()];
}, 1000);
</script>

<template lang="pug">
.Clock
  .time
    span.digit {{ hour }}:{{ minute }}:{{ second }}
  .date
    span.digit {{ year }}
    | 年
    span.digit {{ month }}
    | 月
    span.digit {{ day }}
    | 日
  .date 星期{{ weekday }}
</template>

<style lang="less" scoped>
.Clock {
  text-align: center;
  font-size: 4rem;

  .digit {
    font-family: "digital-7";
  }

  .time {
    font-size: 6rem;
    margin-bottom: 1rem;
  }
}
</style>
